<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>CSS Test: flow-into behavior</title>
    <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"/>
    <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties"/>
    <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
    <link rel="match" href="flow-into-001-ref.xht"/>
    <meta name="flags" content=""/>
    <meta name="assert" content="Elements placed into a named flow follow document order. Children of flow elements can be placed in a different flow. Nested flow elements in the same flow become siblings. Flow-into is not inherited."/>
    <style type="text/css">
      body{
        font-size: 16px;
        line-height: 18px;   
      }
      .source{
        color: green;
      }
      .region{
        width: 100%;
        height: 20px;
      }
      .disjointFlow{
        flow-into: disjoint-flow;
      }
      .disjointRegion{
        flow-from: disjoint-flow;
      }
      .emptyFlow{
        flow-into: empty-flow;
      }
      .emptyRegion{
        flow-from: empty-flow;
      }
      .parentFlow{
        flow-into: parent-flow;
      }
      .parentRegion{
        flow-from: parent-flow;
      }
      .childFlow{
        flow-into: child-flow;
      }
      .childRegion{
        flow-from: child-flow;
      }
      .nestedFlow{
        flow-into: nested-flow;
      }
      .nestedRegion{
        flow-from: nested-flow;
      }
      .noInheritFlow{
        flow-into: noInherit-flow;
      }
      .noInheritRegion{
        flow-from: noInherit-flow;
      }
      .autoFlow{
        flow-into: auto;
      }
      .error{
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="source disjointFlow">
        1 2
      </span>
      <div class="source parentFlow">
        4
        <div class="source childFlow">7 8 9</div>
        5 6
      </div>
      <span class="source disjointFlow">
        3
      </span>
      <span class="source noInheritFlow">
        13
        <span>
          14
        </span>
        15
      </span>
      <span class="source nestedFlow">
        10
        <span class="source nestedFlow">
          12
        </span>
        11
      </span>
    </div>
    <div>
      No text should appear above this line. Below should be lines with three green numbers each counting up to 18.
    </div>
    <div class="region emptyRegion">
      <div class="error">FAIL - empty flow should replace this content.</div>
    </div>
    <div class="region disjointRegion">
      <div class="error">FAIL - disjoint flow should replace this content.</div>
    </div>
    <div class="region parentRegion">
      <div class="error">FAIL - parent flow should replace this content.</div>
    </div>
    <div class="region childRegion">
      <div class="error">FAIL - child flow should replace this content.</div>
    </div>
    <div class="region nestedRegion">
      <div class="error">FAIL - nested flow should replace this content.</div>
    </div>
    <div class="region noInheritRegion">
      <div class="error">FAIL - noInherit flow should replace this content.</div>
    </div>
    <div class="source flowIntoAuto">
      <div>16 17 18</div>
    </div>
  </body>
</html>